<template>
  <div class="navigation111">
    <van-grid :column-num="5">
      <van-grid-item v-for="palace in palaces" :key="palace.url">
        <van-image :src="palace.url" />
        <div class="palace-text">{{ palace.text }}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script setup>
import { ref } from "vue";
let palaces = ref([
  {
    text: "京东超市",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
  },
  {
    text: "数码电器",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    text: "京东新百货",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
  },
  {
    text: "京东生鲜",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
  },
  {
    text: "京东到家",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
  },
  {
    text: "京东超市",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
  },
  {
    text: "数码电器",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
  },
  {
    text: "京东新百货",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
  },
  {
    text: "京东生鲜",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
  },
  {
    text: "京东到家",
    url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
  },
]);
</script>
<style scoped>
  .palace-text{
    font-size: 12px;
  }
</style>
